<template>
<div class="goods">
    <div class="scroll-nav-warpper">
        <!-- 确保数据加载成功后渲染 -->
        <cube-scroll-nav
            :side="true"
            :data="goods"
            v-if="goods.length"
            @change="changeHandler"
            @stickyChange="stickyChangeHandler"
            :options="scrollOptions">
            <template v-slot:bar="props">
                <!-- 插槽数据传递 -->
                <cube-scroll-nav-bar
                    direction="vertical"
                    :labels="props.labels"
                    :txts="barTxts"
                    :current="props.current">
                    <template slot-scope="props">
                        <div class="text">
                             <supportIcon 
                                v-if="props.txt.type>=1"
                                :size="2" 
                                :type="props.txt.type">
                             </supportIcon>
                             <span>{{props.txt.name}}</span>
                             <span class="num" v-if="props.txt.count">
                                 <bubble :num="props.txt.count"></bubble>
                             </span>
                        </div>
                    </template>
                </cube-scroll-nav-bar>
            </template>
            <cube-scroll-nav-panel
                v-for="item in goods"
                :key="item.name"
                :label="item.name"
                :title="item.name">
                <ul>
                    <li v-for="(food,index) in item.foods" 
                    :key="index" 
                    class="food-item"
                    @click="selectFood(food)"
                    >
                        <div class="icon">
                            <img width="57" height="57" :src="food.icon">
                        </div>
                        <div class="content">
                            <h2 class="name">{{food.name}}</h2>
                            <p class="desc">{{food.description}}</p>
                            <div class="extra">
                                <span class="count">月售{{food.sellCount}}份</span><span>好评率{{food.rating}}%</span>
                            </div>
                            <div class="price">
                                <span class="now">￥{{food.price}}</span>
                                <span class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>
                            </div>
                            <div class=  "cartcontrol-wrapper">
                                <!-- 监听子组件派发的方法 -->
                                <cartcontrol @add="onAdd" :food="food"></cartcontrol>
                            </div>
                        </div>
                    </li>
                </ul>
            </cube-scroll-nav-panel>
        </cube-scroll-nav>
    </div>
    <shopCart 
        :selectFoods="selectFoods"
        :deliveryPrice="deliveryPrice"
        :minPrice="minPrice"
        ref="shopCart"
        >
    </shopCart>
</div>
</template>
<script>
    import {getGoods} from "api"
    import supportIcon from "components/support/support-icon.vue"
    import shopCart from "components/shopcart/shopcart"
    import cartcontrol from "components/cartcontrol/cartcontrol"
    import bubble from "components/bubble/bubble"
    export default{
        name:"goods",
        props:{
            data:{
                type:Object,
                default(){
                    return {}
                }
            }
        },
        data() {
            return {
                selectedFood:{},
                goods:[],
                scrollOptions:{
                    //防止点击事件向上传递，不能用stopPropagation
                    click:false,
                    //防止滚动方向发生错误
                    directionLockThreshold: 0 
                },

            };
        },
        computed:{
            seller(){return this.data.seller},
            minPrice(){ return this.data.seller.minPrice},
            deliveryPrice(){ return this.data.seller.deliveryPrice},
            //获取选择的食物，通过props传给子组件
            selectFoods(){
                let ret = []
                this.goods.forEach((good)=>{
                    good.foods.forEach((food)=>{
                        if(food.count){
                            ret.push(food)
                        }
                    })
                })
                return ret
            },
            barTxts(){
                let ret = []
                this.goods.forEach((good)=>{
                    const {type, name ,foods}=good
                    let count = 0
                     foods.forEach((food)=>{
                    count += food.count || 0
                    })
                    ret.push({
                        type,
                        name,
                        count
                    })
                })
                return ret
            }
        },
        
        methods: {
            fetch(){
                //获取数据
                    if(!this.fetched){
                        this.fetched=true
                        getGoods({id:this.seller.id}).then((goods=>{
                        this.goods = goods
                    }))  
                    
                }   
            },
            selectFood(food){
                //获取选择食物
                this.selectedFood=food 
                //显示复刻sticky，确保正确显示
                this.showCartSticky()
                //显示食物评论页面
                this.showFood()
            },
            showFood(){
                this.foodComp=this.foodComp || this.$createFood({
                    $props:{
                        food:"selectedFood"
                    },
                    $events:{
                        //调用子组件中的stick复刻组件动画方式，否则会被遮挡
                        add:(target)=>{this.showCartStickyComp.drop(target)},
                        afterLeave:()=>{this.hideShowCartSticky()}
                    }
                })
                this.foodComp.show()
            },
            onAdd(el){
                // 在监听方法中调用子组件shopCart中的方法，利用父组件实现了兄弟组件间方法的调用
                this.$refs.shopCart.drop(el) 
            },
            changeHandler(label) {
                console.log('changed to:', label)
            },
            stickyChangeHandler(current) {
                console.log('sticky-change', current)
            },
           
            showCartSticky(){
        //创建CartSticky组件
                this.listcom=this.shopCarListComp
                this.showCartStickyComp = this.showCartStickyComp || this.$createShowCartSticky({
                $props:{
                    selectFoods:"selectFoods",
                    deliveryPrice:"deliveryPrice",
                    minPrice:"minPrice",
                    flod:true,
                    }
                })
                this.showCartStickyComp.show()
        },
            hideShowCartSticky(){
            //调用子组件中的复刻组件方法隐藏
                this.showCartStickyComp.hide()
            },
            
        },
        components:{
            shopCart,
            cartcontrol,
            supportIcon,
            bubble
        }
    }
</script>
<style lang="stylus" scoped>
   @import "common/stylus/mixin";
   @import "common/stylus/variable";
   .goods
     position :relative
     text-align :left
     height :100%
     width :100%
     .scroll-nav-warpper
       position :absolute
       width :100%
       top:0
       left:0
       bottom :48px
    >>> .cube-scroll-nav-bar-item
      position:relative
      .text
        .num
          position :absolute
          top : 10px
          right : 5px
    >>> .cube-scroll-nav-panel-title
      padding: 11px 0 11px 15px
      background-color:$color-bacground-ssss
      font-size :12px;
      color:#999
      border-left : 3px solid #bbb
      position: -webkit-sticky;
      position: sticky;
      top: 0px;
    >>> .cube-scroll-nav-bar
      width :80px
      white-space :normal
      overflow : hidden
    >>> .cube-scroll-nav-bar-item
      padding : 0 10px
      display : flex !important
      align-items : center
      height :56px
      line-height :14px
      font-size : $fontsize-small
      background : $color-bacground-ssss
      span 
       text-align :left
    >>> .cube-scroll-nav-bar-item_active
      background:#fff
   .food-item
     display: flex
     margin: 18px
     padding-bottom: 18px
     border-1px(rgba(7, 17, 27, 0.1))
     &:last-child
       border-none()
        margin-bottom: 0
     .icon
       flex: 0 0 57px
       margin-right: 10px
     .content
       flex: 1
       .name
         margin: 2px 0 8px 0
         height: 14px
         line-height: 14px
         font-size: 14px
         color: rgb(7, 17, 27)
       .desc, .extra
         line-height: 10px
         font-size: 10px
         color: rgb(147, 153, 159)
       .desc
         line-height: 12px
         margin-bottom: 8px
       .extra
         .count
            margin-right: 12px
        .price
          font-weight: 700
          line-height: 24px
          .now
            margin-right: 8px
            font-size: 14px
            color: rgb(240, 20, 20)
          .old
            text-decoration: line-through
            font-size: 10px
            color: rgb(147, 153, 159)
        .cartcontrol-wrapper
          position: absolute
          right: 0
          bottom: 12px  
</style>